<%@page import="org.ifilm.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="/film/bootstrap/js/typeahead.js"></script>
	</head>
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
		  	<div class="navbar-inner">
		  		<div class="container">
			    	<a class="brand" href="/film/home.jsp">iFilm</a>
			    	<ul class="nav">
			      		<li id="li_home"><a href="/film/home.jsp">Home</a></li>
						<li id="li_createproject"><a href="/film/createProject.jsp">Create Project</a></li>
						<li class="dropdown pull-left">
						    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
						     	Search for
						    	<b class="caret"></b>
						    </a>
						    <ul class="dropdown-menu">
								<li id="li_searchjob"><a class="navbar-link" href="/film/project/search.do?page=1&max=<%=GeneralConstants.MAXIMUM_POSTING_PAGINATION%>&userType=${user.userType}">Job</a></li>
						   		<!-- TODO 
								<li><a href="#" class="navbar-link">Equipment</a></li>-->
								<li><a href="/film/softTT.jsp" class="navbar-link">Tips and Tricks</a></li>
						   </ul>
						 </li>
			    	</ul>
			    	<div class="nav pull-right">
						 <li class="dropdown pull-left">
						    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
						    	<span id="userInfo">${user.name} ${user.surname}</span>
						      	<b class="caret"></b>
						    </a>
						    <ul class="dropdown-menu">
						   		<li><a href='/film/user/getUser.do?userId=${user.id}' class="navbar-link">My Profile</a></li>
								<li><a href="/film/project/listUserProjects.do?userId=${user.id}&page=1&max=<%=GeneralConstants.MAXIMUM_PROJECT_PAGINATION%>" id="userProjects" class="navbar-link">My Projects</a></li>
								<li><a href="/film/notice/getApplications.do" class="navbar-link">My Applications</a></li>
								<li><a href="/film/notice/listAppliersToMyProjects.do" class="navbar-link">Appliers to My Projects</a></li>
								<li><a href="/film/message/getMessages.do" class="navbar-link" id="messages">Messages</a></li>
						    </ul>
						  </li>
			    		<input type="text" class="typeahead" style="width:150px;margin-bottom:2px;"/>
						<a href='#' id="logout" data-toggle="tab">Logout</a>
			    	</div>			    	
		    	</div>
		    </div>
		</div>		
	</body>

	<script type="text/javascript">
		/*TODO
		$('ul li').click(function() {
		  	$(this).addClass('active');
		  	$(this).parent().children('li').not(this).removeClass('active');
		});
		*/
			
		$.ajax("/film/message/getUnreadMessageCount.do").done(function(data) {
			if (data.count != null) {
				$("#userInfo").append("(" + data.count + ")");
				$("#messages").append("(" + data.count + ")");
			}
		});
	</script>
</html>